﻿<Window x:Class="WOzTestUI.ScratchWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Scratch Pads" Height="800" Width="1200"
        x:Name="_ScratchWindow"
        ResizeMode="CanResizeWithGrip"
        
        xmlns:local="clr-namespace:WOzTestUI"
        xmlns:WozLib="clr-namespace:WozLib;assembly=WozLib"
        xmlns:SketchProperty="clr-namespace:WozLib.UI.Ink.SketchProperties;assembly=WozLib"
        xmlns:WozLib-Ink="clr-namespace:WozLib.UI.Ink;assembly=WozLib"
        xmlns:WozLib-Containers="clr-namespace:WozLib.UI.Containers;assembly=WozLib"
        xmlns:WozLib_Controls="clr-namespace:WozLib.UI.Controls;assembly=WozLib"
    >
  <Grid>
    <Grid Margin="1" DataContext="{Binding ElementName=_ScratchWindow, Path=WozScreensProvider}">

      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
      </Grid.ColumnDefinitions>

      <!-- Screen List -->
      <Border Grid.Column="0" Margin="1 2 2 5" BorderBrush="Gray" BorderThickness="1" CornerRadius="5"   Background="{StaticResource MajorControlBackground}">
        <Grid>

          <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
          </Grid.RowDefinitions>

          <StackPanel Grid.Row="1" HorizontalAlignment="Left" Orientation="Horizontal" Margin="3">
            <TextBlock VerticalAlignment="Center" FontFamily="Verdana" FontSize="12" Text="zoom "/>
            <TextBlock VerticalAlignment="Center" FontFamily="Verdana" FontSize="8">+</TextBlock>
            <Slider x:Name="ScreenListScale" VerticalAlignment="Center" Width="150"
                    Orientation="Horizontal" Minimum="0.2" Maximum="2.5" Value="1.0"
              IsMoveToPointEnabled="False" LargeChange="0.1" IsDirectionReversed="True"></Slider>
            <TextBlock VerticalAlignment="Center" FontFamily="Verdana" FontSize="8">-</TextBlock>
          </StackPanel>

          <TabControl Grid.Row="0" TabStripPlacement="Bottom" Margin="3">
            <TabItem Header="list view">
              <Grid>


                <WozLib-Containers:ReorderableListBox
                  x:Name="_ScreensListBox"
                  ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                  ScrollViewer.VerticalScrollBarVisibility="Visible"
                  ScrollViewer.CanContentScroll="True"
                  Margin="2"
                  IsSynchronizedWithCurrentItem="True"
                  SelectedIndex="0"
                  HorizontalAlignment="Stretch"
                  ItemsSource="{Binding}"
              >
                  <ListBox.ItemTemplate>
                    <HierarchicalDataTemplate>
                      <!--MinWidth="100" MaxWidth="200"-->
                      <Grid x:Name="ItemGrid" ToolTip="{Binding Path=VisualToolTip}"
                            Margin="4" HorizontalAlignment="Stretch">
                        <Grid.LayoutTransform>
                          <ScaleTransform ScaleX="{Binding ElementName=ScreenListScale, Path=Value}" ScaleY="{Binding ElementName=ScreenListScale, Path=Value}">
                          </ScaleTransform>
                        </Grid.LayoutTransform>
                        <Grid.Background>
                          <SolidColorBrush Color="LightSkyBlue" x:Name="ItemGridBackground" />
                        </Grid.Background>
                        <Grid.ColumnDefinitions>
                          <ColumnDefinition Width="*"/>
                          <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <!--MaxWidth="300"-->
                        <TextBlock TextWrapping="Wrap" HorizontalAlignment="Stretch" Grid.Column="0" VerticalAlignment="Center" Margin="4" FontFamily="Verdana" Text="{Binding Path=Description}"/>
                        <Rectangle Grid.Column="1" Margin="3" RadiusX="4" RadiusY="4" StrokeThickness="1" Stroke="Black" Width="35" Height="35">
                          <Rectangle.Fill>
                            <VisualBrush Visual="{Binding}"/>
                          </Rectangle.Fill>
                        </Rectangle>
                        <Grid.Triggers>
                          <EventTrigger RoutedEvent="Grid.MouseEnter">
                            <EventTrigger.Actions>
                              <BeginStoryboard>
                                <Storyboard>
                                  <ColorAnimation
                                    Storyboard.TargetProperty="Color"
                                    Storyboard.TargetName="ItemGridBackground"
                                    Duration="0:0:0.1"
                                >
                                    <ColorAnimation.To>
                                      <!--To="LightSalmon"-->
                                      <!--R:214  G:217  B:229=""-->
                                      <!--I don't know why it says Color is invalid here, but it is valid and will run fine-->
                                      <Color A="255" R="214" G="217" B="229" />
                                    </ColorAnimation.To>
                                  </ColorAnimation>
                                </Storyboard>
                              </BeginStoryboard>
                            </EventTrigger.Actions>
                          </EventTrigger>
                          <EventTrigger RoutedEvent="Grid.MouseLeave">
                            <EventTrigger.Actions>
                              <BeginStoryboard>
                                <Storyboard>
                                  <ColorAnimation
                                    Storyboard.TargetProperty="Color"
                                    Storyboard.TargetName="ItemGridBackground"
                                    To="LightSkyBlue"
                                    Duration="0:0:0.3"
                                />
                                </Storyboard>
                              </BeginStoryboard>
                            </EventTrigger.Actions>
                          </EventTrigger>
                        </Grid.Triggers>
                      </Grid>
                    </HierarchicalDataTemplate>
                  </ListBox.ItemTemplate>

                  <ListBox.Triggers>
                    <EventTrigger RoutedEvent="ListBox.MouseEnter">
                      <EventTrigger.Actions>
                        <BeginStoryboard>
                          <Storyboard>
                            <DoubleAnimation
                              Storyboard.TargetProperty="Opacity"
                              Storyboard.TargetName="_AddScreenButton"
                              To="1.0"
                              Duration="0:0:0"
                                />
                          </Storyboard>
                        </BeginStoryboard>
                      </EventTrigger.Actions>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="ListBox.MouseLeave">
                      <EventTrigger.Actions>
                        <BeginStoryboard>
                          <Storyboard>
                            <DoubleAnimation
                              Storyboard.TargetProperty="Opacity"
                              Storyboard.TargetName="_AddScreenButton"
                              To="0.0"
                              Duration="0:0:0.3"
                                />
                          </Storyboard>
                        </BeginStoryboard>
                      </EventTrigger.Actions>
                    </EventTrigger>
                  </ListBox.Triggers>

                </WozLib-Containers:ReorderableListBox>

                <Button x:Name="_AddScreenButton" ClickMode="Press" Style="{StaticResource AddButtonStyleBlue}" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="6" Opacity="0" Background="LightSkyBlue" Foreground="White" BorderBrush="Black">

                  <Button.ToolTip>
                    <ToolTip>
                      <TextBlock>
                        add a new screen
                      </TextBlock>
                    </ToolTip>
                  </Button.ToolTip>

                  <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.MouseEnter">
                      <EventTrigger.Actions>
                        <BeginStoryboard>
                          <Storyboard>
                            <!--This is a total hack because it relies on this happening after the mouse leave of the list below the button -->
                            <DoubleAnimation
                              Storyboard.TargetProperty="Opacity"
                              Storyboard.TargetName="_AddScreenButton"
                              To="1.0"
                              Duration="0:0:0"
                                />
                          </Storyboard>
                        </BeginStoryboard>
                      </EventTrigger.Actions>
                    </EventTrigger>
                  </Button.Triggers>
                </Button>


              </Grid>
            </TabItem>

            <TabItem  Header="grid view">
              <Grid>

                <ListBox
                  x:Name="_ScreensListBox2"
                  ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                  ScrollViewer.VerticalScrollBarVisibility="Visible"
                  ScrollViewer.CanContentScroll="True"
                  Margin="2"
                  IsSynchronizedWithCurrentItem="True"
                  SelectedIndex="0"
                  HorizontalAlignment="Stretch"
                  ItemsSource="{Binding}"
              >
                  <!--
              Background="AliceBlue"
              BorderThickness="0"
              -->
                  <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                      <WrapPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                                 FlowDirection="LeftToRight"
                                   >

                      </WrapPanel>
                    </ItemsPanelTemplate>
                  </ListBox.ItemsPanel>

                  <ListBox.ItemTemplate>

                    <HierarchicalDataTemplate>

                      <Grid x:Name="ItemGrid" ToolTip="{Binding Path=VisualToolTip}" Margin="4">
                        <Grid.LayoutTransform>
                          <ScaleTransform ScaleX="{Binding ElementName=ScreenListScale, Path=Value}" ScaleY="{Binding ElementName=ScreenListScale, Path=Value}">
                          </ScaleTransform>
                        </Grid.LayoutTransform>
                        <Grid.Background>
                          <SolidColorBrush Color="LightSkyBlue" x:Name="ItemGridBackground" />
                        </Grid.Background>
                        <Grid.RowDefinitions>
                          <RowDefinition Height="Auto"/>
                          <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>

                        <!--MaxWidth="300"-->
                        <!--RadiusX="4" RadiusY="4"
                          StrokeThickness="1" Stroke="Black"-->
                        <Rectangle Grid.Row="0" Margin="3" Width="100" Height="80">
                          <Rectangle.Fill>
                            <VisualBrush Visual="{Binding}" Stretch="Uniform"/>
                          </Rectangle.Fill>
                        </Rectangle>

                        <TextBlock TextWrapping="Wrap" HorizontalAlignment="Stretch"
                                   Grid.Row="1" VerticalAlignment="Center"
                          Margin="4" FontFamily="Verdana" FontSize="10" Text="{Binding Path=Description}"/>

                        <Grid.Triggers>
                          <EventTrigger RoutedEvent="Grid.MouseEnter">
                            <EventTrigger.Actions>
                              <BeginStoryboard>
                                <Storyboard>
                                  <ColorAnimation
                                    Storyboard.TargetProperty="Color"
                                    Storyboard.TargetName="ItemGridBackground"
                                    Duration="0:0:0.1"
                                >
                                    <ColorAnimation.To>
                                      <!--To="LightSalmon"-->
                                      <!--R:214  G:217  B:229=""-->
                                      <!--I don't know why it says Color is invalid here, but it is valid and will run fine-->
                                      <Color A="255" R="214" G="217" B="229" />
                                    </ColorAnimation.To>
                                  </ColorAnimation>
                                </Storyboard>
                              </BeginStoryboard>
                            </EventTrigger.Actions>
                          </EventTrigger>
                          <EventTrigger RoutedEvent="Grid.MouseLeave">
                            <EventTrigger.Actions>
                              <BeginStoryboard>
                                <Storyboard>
                                  <ColorAnimation
                                    Storyboard.TargetProperty="Color"
                                    Storyboard.TargetName="ItemGridBackground"
                                    To="LightSkyBlue"
                                    Duration="0:0:0.3"
                                />
                                </Storyboard>
                              </BeginStoryboard>
                            </EventTrigger.Actions>
                          </EventTrigger>
                        </Grid.Triggers>

                      </Grid>

                    </HierarchicalDataTemplate>
                  </ListBox.ItemTemplate>

                  <ListBox.Triggers>
                    <EventTrigger RoutedEvent="ListBox.MouseEnter">
                      <EventTrigger.Actions>
                        <BeginStoryboard>
                          <Storyboard>
                            <DoubleAnimation
                              Storyboard.TargetProperty="Opacity"
                              Storyboard.TargetName="_AddScreenButton2"
                              To="1.0"
                              Duration="0:0:0"
                                />
                          </Storyboard>
                        </BeginStoryboard>
                      </EventTrigger.Actions>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="ListBox.MouseLeave">
                      <EventTrigger.Actions>
                        <BeginStoryboard>
                          <Storyboard>
                            <DoubleAnimation
                              Storyboard.TargetProperty="Opacity"
                              Storyboard.TargetName="_AddScreenButton2"
                              To="0.0"
                              Duration="0:0:0.3"
                                />
                          </Storyboard>
                        </BeginStoryboard>
                      </EventTrigger.Actions>
                    </EventTrigger>
                  </ListBox.Triggers>

                </ListBox >

                <Button x:Name="_AddScreenButton2" ClickMode="Press" Style="{StaticResource AddButtonStyleBlue}" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="6" Opacity="0" Background="LightSkyBlue" Foreground="White" BorderBrush="Black">

                  <Button.ToolTip>
                    <ToolTip>
                      <TextBlock>
                        add a new screen
                      </TextBlock>
                    </ToolTip>
                  </Button.ToolTip>

                  <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.MouseEnter">
                      <EventTrigger.Actions>
                        <BeginStoryboard>
                          <Storyboard>
                            <!--This is a total hack because it relies on this happening after the mouse leave of the list below the button -->
                            <DoubleAnimation
                              Storyboard.TargetProperty="Opacity"
                              Storyboard.TargetName="_AddScreenButton2"
                              To="1.0"
                              Duration="0:0:0"
                                />
                          </Storyboard>
                        </BeginStoryboard>
                      </EventTrigger.Actions>
                    </EventTrigger>
                  </Button.Triggers>
                </Button>


              </Grid>
            </TabItem>
          </TabControl>

        </Grid>
      </Border>
      <!-- end Screen List -->

      <GridSplitter Grid.Column="1"
          Grid.RowSpan="1"
          HorizontalAlignment="Center"
          VerticalAlignment="Stretch"
          Width="4"
          ShowsPreview="True"
          Background="Transparent"
              />

      <Grid Grid.Column="2">
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="Auto"/>
          <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <!--wizards tool-->
        <ToolBarTray Grid.Column="0" Orientation="Vertical" Background="White"
                     Margin="0 0 3 0">

          <!--ink canvas editing modes-->
          <WozLib_Controls:ToolSelectToolbar x:Name="_ToolSelectToolbar"/>

          <!--application commands-->
          <ToolBar>
            <ToolBar.Template>
              <ControlTemplate TargetType="{x:Type ToolBar}">
                <Border BorderBrush="Gray" BorderThickness="1" CornerRadius="5" Margin="0 10 0 0" Background="{StaticResource MajorControlBackground}">
                  <ItemsPresenter/>
                </Border>
              </ControlTemplate>
            </ToolBar.Template>
            <ToolBar.ItemsPanel>
              <ItemsPanelTemplate>
                <StackPanel Margin="2" Orientation="{Binding ElementName=_ToolBar, Path=Orientation}" />
              </ItemsPanelTemplate>
            </ToolBar.ItemsPanel>
            <ToolBar.Resources>
              <Style TargetType="Button" x:Key="ButtonStyle">
                <Setter Property="HorizontalAlignment" Value="Left"/>
              </Style>
              <Style TargetType="{x:Type Canvas}">
                <Setter Property="Width" Value="12"/>
                <Setter Property="Height" Value="12"/>
                <Setter Property="Margin" Value="0 0 3 0"/>
              </Style>
            </ToolBar.Resources>

            <!--heading-->
            <!--<TextBlock Margin="17 5 0 0" TextAlignment="Left" FontWeight="SemiBold">commands</TextBlock>-->

            <!--list of commands-->
            <Button x:Name="UndoButton" Command="ApplicationCommands.Undo"
            Style="{StaticResource ButtonStyle}" >
              <StackPanel Orientation="Horizontal">
                <Canvas>
                  <Path Data="M 7,12 C 12,6 8,0 2,7" Stroke="sc#1, 0.2725, 0.3353, 0.7882" StrokeThickness="2"/>
                  <Polygon Points="0,9 0,3 6,9" Fill="sc#1, 0.2725, 0.3353, 0.7882"/>
                </Canvas>
                <TextBlock Text="undo"/>
              </StackPanel>
            </Button>

            <Button x:Name="RedoButton" Command="ApplicationCommands.Redo"
                    Style="{StaticResource ButtonStyle}" >
              <StackPanel Orientation="Horizontal">
                <Canvas>
                  <Path Data="M 5,12 C 0,6 4,0 10,7" Stroke="sc#1, 0.2725, 0.3353, 0.7882" StrokeThickness="2"/>
                  <Polygon Points="12,9 12,3 6,9" Fill="sc#1, 0.2725, 0.3353, 0.7882"/>
                </Canvas>
                <TextBlock Text="redo"/>
              </StackPanel>
            </Button>

            <Button x:Name="CutButton" Command="ApplicationCommands.Cut"
                    Style="{StaticResource ButtonStyle}" >
              <StackPanel Orientation="Horizontal">
                <Canvas ClipToBounds="True">

                  <Ellipse Width="5" Height="7" Stroke="DarkBlue" StrokeThickness="1.5" Fill="Transparent" Canvas.Top="5" Canvas.Left="1">
                    <Ellipse.LayoutTransform>
                      <RotateTransform CenterX="2.5" CenterY="3" Angle="20"/>
                    </Ellipse.LayoutTransform>
                  </Ellipse>

                  <Ellipse Width="4" Height="6" Stroke="DarkBlue" StrokeThickness="1.5" Fill="Transparent" Canvas.Top="5" Canvas.Left="6">
                    <Ellipse.LayoutTransform>
                      <RotateTransform CenterX="2.5" CenterY="3" Angle="-15"/>
                    </Ellipse.LayoutTransform>
                  </Ellipse>

                  <Polygon Points="5,5 6,6 9,1" StrokeThickness="1" Fill="DarkGray" Stroke="DarkGray"/>
                  <Polygon Points="7,4 6,6 1,1" StrokeThickness="1" Fill="DarkGray" Stroke="DarkGray"/>

                </Canvas>
                <TextBlock Text="cut"/>
              </StackPanel>
            </Button>

            <Button x:Name="CopyButton" Command="ApplicationCommands.Copy"
                    Style="{StaticResource ButtonStyle}" >
              <StackPanel Orientation="Horizontal">
                <Canvas>
                  <Rectangle Stroke="Gray" Fill="White" Width="8" Height="9"/>
                  <Line X1="1.5" X2="6.5" Y1="2.5" Y2="2.5" Stroke="Blue" StrokeThickness="0.5" />
                  <Line X1="1.5" X2="6.5" Y1="4.5" Y2="4.5" Stroke="Blue" StrokeThickness="0.5" />
                  <Line X1="1.5" X2="6.5" Y1="6.5" Y2="6.5" Stroke="Blue" StrokeThickness="0.5" />

                  <Rectangle Stroke="Gray" Fill="White" Width="8" Height="9" Canvas.Left="4" Canvas.Top="3"/>
                  <Line X1="5.5" X2="10.5" Y1="5.5" Y2="5.5" Stroke="Blue" StrokeThickness="0.5" />
                  <Line X1="5.5" X2="10.5" Y1="7.5" Y2="7.5" Stroke="Blue" StrokeThickness="0.5" />
                  <Line X1="5.5" X2="10.5" Y1="9.5" Y2="9.5" Stroke="Blue" StrokeThickness="0.5" />
                </Canvas>
                <TextBlock Text="copy"/>
              </StackPanel>
            </Button>

            <Button x:Name="PasteButton" Command="ApplicationCommands.Paste"
                    Style="{StaticResource ButtonStyle}" >
              <StackPanel Orientation="Horizontal">
                <Canvas>

                  <Rectangle Canvas.Top="1" Stroke="Gray" StrokeThickness="1" Width="12" Height="11" RadiusX="2" RadiusY="2">
                    <Rectangle.Fill>
                      <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                        <GradientStop Color="Yellow" Offset="0.15"/>
                        <GradientStop Color="Orange" Offset="0.75"/>
                      </LinearGradientBrush>
                    </Rectangle.Fill>
                  </Rectangle>

                  <Ellipse Fill="Gold" Stroke="Gray" StrokeThickness="1" Width="5" Height="5" Canvas.Top="0" Canvas.Left="3.5"/>
                  <Ellipse Fill="Gray" StrokeThickness="0" Width="1" Height="1" Canvas.Top="2" Canvas.Left="5.5"/>
                  <Line X1="2" X2="10" Y1="4.5" Y2="4.5" Stroke="Gray" StrokeThickness="1" />

                  <Rectangle Stroke="Gray" Fill="White" Width="8" Height="6" Canvas.Left="4" Canvas.Top="6"/>
                  <Line X1="5.5" X2="10.5" Y1="7.5" Y2="7.5" Stroke="Blue" StrokeThickness="0.5" />
                  <Line X1="5.5" X2="10.5" Y1="9.5" Y2="9.5" Stroke="Blue" StrokeThickness="0.5" />

                </Canvas>
                <TextBlock Text="paste"/>
              </StackPanel>
            </Button>

            <Button x:Name="MoveBackwardButton" Command="local:WizardWindow.MoveBackwardCommand"
                    Style="{StaticResource ButtonStyle}" >
              <StackPanel Orientation="Horizontal">
                <Canvas>
                  <Polygon Points="2,10 10,10 10,12 2,12" Stroke="Gray" Fill="sc#1, 0.2725, 0.3353, 0.7882" StrokeThickness="0"/>
                  <Polygon Points="2,10 10,10 7,5 11,5 6,0 1,5 5,5 " Stroke="Gray" StrokeThickness="0.5">
                    <Polygon.Fill>
                      <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1" >
                        <LinearGradientBrush.GradientStops>
                          <GradientStop Color="AliceBlue" Offset="0" />
                          <GradientStop Color="sc#1, 0.2725, 0.3353, 0.7882" Offset="1" />
                        </LinearGradientBrush.GradientStops>
                      </LinearGradientBrush>
                    </Polygon.Fill>
                  </Polygon>
                </Canvas>
                <TextBlock Text="backward"/>
              </StackPanel>
            </Button>

            <Button x:Name="MoveForwardButton" Command="local:WizardWindow.MoveForwardCommand"
                    Style="{StaticResource ButtonStyle}" >
              <StackPanel Orientation="Horizontal">
                <Canvas>
                  <Polygon Points="1,7 6,12 11,7 11,5 6,10 1,5 " Stroke="Gray" Fill="sc#1, 0.2725, 0.3353, 0.7882" StrokeThickness="0"/>
                  <Polygon Points="5,0 7,0 9,5 11,5 6,10 1,5 3,5 " Stroke="Gray" StrokeThickness="0.5">
                    <Polygon.Fill>
                      <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1" >
                        <LinearGradientBrush.GradientStops>
                          <GradientStop Color="AliceBlue" Offset="0" />
                          <GradientStop Color="sc#1, 0.2725, 0.3353, 0.7882" Offset="1" />
                        </LinearGradientBrush.GradientStops>
                      </LinearGradientBrush>
                    </Polygon.Fill>
                  </Polygon>
                </Canvas>
                <TextBlock Text="forward"/>
              </StackPanel>
            </Button>

          </ToolBar>
        </ToolBarTray>
        <!--end wizards tool-->

        <!--selected screen-->
        <ContentControl Grid.Column="1" x:Name="_SelectedScreenContentControl" Content="{Binding Path=/}">
          <ContentControl.ContentTemplate>
            <HierarchicalDataTemplate>

              <Grid>

                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="*"/>
                  <ColumnDefinition Width="Auto"/>
                  <ColumnDefinition Width="250"/>
                </Grid.ColumnDefinitions>


                <Border Grid.Row="0" Margin="0 2 2 5" BorderBrush="Gray" BorderThickness="1" CornerRadius="5"  Background="{StaticResource MajorControlBackground}">
                  <Grid>
                    <Grid.RowDefinitions>
                      <RowDefinition Height="Auto"/>
                      <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

                    <StackPanel Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Left">
                      <TextBlock Style="{StaticResource TextBoxLabel}">screen title:</TextBlock>
                      <TextBox Text="{Binding Path=Description, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                               Style="{StaticResource ScreenProperyTextBox}"
                               PreviewMouseDown="_TextBox_SelectAll_PreviewMouseDown"
                               GotFocus="_TextBox_SelectAll_GotFocus"
                                       />

                      <TextBlock Style="{StaticResource TextBoxLabel}" >width:</TextBlock>
                      <TextBox Text="{Binding Path=Width, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged }"
                               Style="{StaticResource ScreenProperyTextBox}"
                               PreviewMouseDown="_TextBox_SelectAll_PreviewMouseDown"
                               GotFocus="_TextBox_SelectAll_GotFocus"
                                       />

                      <TextBlock Style="{StaticResource TextBoxLabel}">height:</TextBlock>
                      <TextBox Text="{Binding Path=Height, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged }"
                               Style="{StaticResource ScreenProperyTextBox}"
                               PreviewMouseDown="_TextBox_SelectAll_PreviewMouseDown"
                               GotFocus="_TextBox_SelectAll_GotFocus"
                                       />
                    </StackPanel>

                    <ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Visible"
                                  CanContentScroll="True"
                      VerticalScrollBarVisibility="Auto"
                      Margin="3"
                      x:Name="_SelectedScreenScroller"
                            >
                      <!--<Border Grid.Column="0" BorderBrush="Gray"  BorderThickness="1" Margin="2" >-->
                      <ContentControl Content="{Binding}" HorizontalAlignment="Left"
                        VerticalAlignment="Top" HorizontalContentAlignment="Left"
                        VerticalContentAlignment="Top">
                        <ContentControl.LayoutTransform>
                          <ScaleTransform ScaleX="{Binding ElementName=SelectedScreenScale, Path=Value}" ScaleY="{Binding ElementName=SelectedScreenScale, Path=Value}">
                          </ScaleTransform>
                        </ContentControl.LayoutTransform>
                      </ContentControl>
                      <!--</Border>-->
                    </ScrollViewer>

                  </Grid>
                </Border>

                <GridSplitter Grid.Column="1"
                  Grid.RowSpan="1"
                  HorizontalAlignment="Center"
                  VerticalAlignment="Stretch"
                  Width="4"
                  ShowsPreview="True"
                  Background="Transparent"
                          />

                <!--property window on the right-->

                <Grid Grid.Column="2">
                  <Grid.RowDefinitions>
                    <RowDefinition Height="175"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                  </Grid.RowDefinitions>

                  <Border Grid.Row="0" Margin="0 2 5 5" BorderBrush="Gray" BorderThickness="1" CornerRadius="5"  Background="{StaticResource MajorControlBackground}">
                    <Grid >
                      <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                      </Grid.RowDefinitions>
                      <Grid Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="3">

                        <WozLib_Controls:ScrollNavigator ScrollViewer="{Binding ElementName=_SelectedScreenScroller}" />

                      </Grid>
                      <StackPanel Grid.Row="1" Orientation="Horizontal" Margin="3">
                        <TextBlock VerticalAlignment="Center" FontFamily="Verdana" FontSize="12">zoom</TextBlock>
                        <TextBlock VerticalAlignment="Center" FontFamily="Verdana" FontSize="8">+</TextBlock>
                        <Slider x:Name="SelectedScreenScale" VerticalAlignment="Center" Width="150"
                                Orientation="Horizontal" Minimum="0.2" Maximum="2.5" Value="1.0"
                          IsMoveToPointEnabled="False" LargeChange="0.1" IsDirectionReversed="True"></Slider>
                        <TextBlock VerticalAlignment="Center" FontFamily="Verdana" FontSize="8">-</TextBlock>
                      </StackPanel>
                    </Grid>
                  </Border>

                  <GridSplitter Grid.Row="1"
                                Grid.ColumnSpan="1"
                  HorizontalAlignment="Stretch"
                  VerticalAlignment="Center"
                  Height="4"
                  ShowsPreview="True"
                  Background="Transparent"
                          />

                  <Border Grid.Row="2" Margin="0 2 5 5"  BorderBrush="Gray" BorderThickness="1" CornerRadius="5" Background="{StaticResource MajorControlBackground}">
                    <Grid  >
                      <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                      </Grid.RowDefinitions>

                      <ListBox x:Name="_PropertiesListBox"
                          Margin="3"
                          ItemsSource="{Binding Path=SelectWozObjectCascadingProperties}"
                              
                          Grid.Row="0"
                          HorizontalAlignment="Stretch"
                          ScrollViewer.HorizontalScrollBarVisibility="Visible"
                          ScrollViewer.VerticalScrollBarVisibility="Auto"
                          ScrollViewer.CanContentScroll="True"
                            >
                        <ListBox.ItemTemplate>
                          <HierarchicalDataTemplate>
                            <Grid>
                              <Grid.LayoutTransform>
                                <ScaleTransform ScaleX="{Binding ElementName=PropertyScale, Path=Value}" ScaleY="{Binding ElementName=PropertyScale, Path=Value}">
                                </ScaleTransform>
                              </Grid.LayoutTransform>
                              <ContentPresenter Content="{Binding}"/>
                            </Grid>
                          </HierarchicalDataTemplate>
                        </ListBox.ItemTemplate>
                      </ListBox>

                      <StackPanel Grid.Row="1" HorizontalAlignment="Left" Orientation="Horizontal" Margin="3">
                        <TextBlock VerticalAlignment="Center" FontFamily="Verdana" FontSize="12" Text="zoom "/>
                        <TextBlock VerticalAlignment="Center" FontFamily="Verdana" FontSize="8">+</TextBlock>
                        <Slider x:Name="PropertyScale" VerticalAlignment="Center" Width="150"
                                Orientation="Horizontal" Minimum="0.2" Maximum="2.5" Value="1.0"
                          IsMoveToPointEnabled="False" LargeChange="0.1" IsDirectionReversed="True"></Slider>
                        <TextBlock VerticalAlignment="Center" FontFamily="Verdana" FontSize="8">-</TextBlock>
                      </StackPanel>

                    </Grid>
                  </Border>
                  <!-- end properties panel -->

                </Grid>
                <!-- end left panel-->

              </Grid>
            </HierarchicalDataTemplate>
          </ContentControl.ContentTemplate>
        </ContentControl>
        <!--end selected screen-->
      </Grid>
    </Grid>
  </Grid>
</Window>
